
export const useText=`<!-- 使用textCoyp:展示及复制的文本 -->
<!-- 插槽 show:上方展示的组件  title:组件的标题或说明文字 -->
<template>
    <XCopyText :textCoyp='textCoyp'>
        <template v-slot:show>
            <div style="text-align: center;">
                展示内容插槽
            </div>
        </template>
        <template v-slot:title>
            标题插槽
        </template>
    </XCopyText>
</template>
<script setup>
    import { ref } from "vue";
    import XDayAndTime from "@/components/other/dayAndTime/XDayAndTime.vue";
    const textCoyp = ref("这是要复制展示的的文本")
</script>`


export const componentsText= `<template>
<div class="textShowBox">
    <div class="showCom">
        <slot name="show"></slot>
    </div>
    <div class="btnList">
        <div class="titleBox">
            <slot name="title"></slot>
        </div>
        <div class="btnBox">
            <el-tooltip class="box-item" effect="dark" content="复制代码" placement="bottom">
                <img class="operatingButton" src="/svg/icon_copy.svg" @click="copyToClipboard" alt="SVG Image">
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="查看源代码" placement="bottom">
                <img class="operatingButton" src="/svg/icon_daima.svg" @click="showVSCode" alt="SVG Image">
            </el-tooltip>
        </div>
    </div>
    <!-- 使用 v-model 绑定 str 字符串到文本框 -->
    <div class="codebox" v-show="SourceCode">
        <pre><code>{{ str }}</code></pre>
    </div>
    <textarea v-model="str" ref="copyInput" class="noShowTextarea"></textarea>
    <div class="contractBtn" v-show="SourceCode" @click="showVSCode">
        <el-icon>
            <CaretTop />
        </el-icon>
        隐藏源代码
    </div>
</div>
</template>

<script setup>
import { ref, onMounted } from "vue";
const props = defineProps({
textCoyp: {
    type: String,
    default: '
},
// 是否展开代码
showSourceCode: {
    type: Boolean,
    default: false
}
});
const str = ref(props.textCoyp);
const SourceCode = ref(props.showSourceCode)
const copyInput = ref(null);
const copyToClipboard = () => {
copyInput.value.select();
document.execCommand('Copy');
};
const showVSCode = () => {
SourceCode.value = !SourceCode.value
}
</script>
<style lang="scss" scoped>
.textShowBox {
position: relative;
margin:10px auto;
width: 90%;
border: 1px solid #ccc;
border-radius: 5px;

.btnList {
    // border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    padding: 5px 20px;
    display: flex;
    justify-content: space-between;
    .titleBox{
        flex: 1;
    }
    .btnBox{
        display: flex;
        flex: 0;
        min-width: 55px;
        justify-content: end;
        .operatingButton {
            height: 22px;
            margin-left: 5px;
            cursor: pointer;
            opacity: .6;
        }

        .operatingButton:hover {
            opacity: 1;
        }
    }
}


.codebox {
    overflow-x: auto;
    white-space: pre-wrap;
    font-size: 13px;
    padding: 10px;
    background-color: #F5F7FA;

    pre {
        min-width: none;
        max-width: 100%;

        code {
            width: auto;
            min-width: none;
        }
    }
}

.noShowTextarea {
    width: 0;
    height: 0;
    position: absolute;
    top: 10px;
    left: 10px;
    opacity: 0;
}

.CopyBtn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    border: 1px solid #666;
    font-size: 12px;
    width: 60px;
}

.CopyBtn:hover {
    background: #dfdfdf;
    font-weight: 700;
}

.contractBtn {
    text-align: center;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    cursor: pointer;
}

}</style>`
